
<template>
  <div class="app-container action-account-container">      
    <div class="LPay-code-container">
      <div id="ipt_pwd2" class="flex-normal ipt-pwd-content">
        <span id="LOGPASS2_SHOW">请输入密码</span>
        <input id="LOGPASS2" class="default input_search" type="password" disabled="disabled" />
        <div id="keyboardBtn2" class="ipt_pwd_rjp default"></div>
      </div>
      <div id="ipt_pwd3" class="flex-normal ipt-pwd-content">
        <span id="LOGPASS3_SHOW">请确认密码</span>
        <input id="LOGPASS3" class="default input_search" type="password" disabled="disabled" />
        <div id="keyboardBtn3" class="ipt_pwd_rjp default"></div>
      </div>
    </div>
    <el-button id="get-password" @click="getPwd">获取密码</el-button>
  </div>
</template>

<script>
import {
  submitOpenAccount, getRandom
} from "@/api/financeManage/shop-finance";
export default {
  data() {
    return {
      options: {},
      passwordInstance: null,
      passwordInstance2: null
    };
  },
  mounted(){
    let _self = this
    _self.getRandom()
  },
  methods: {    
    getRandom(){
      let _self = this
      getRandom().then(res => {
        console.log(res.data)
        _self.options = res.data
        _self.passwordInstance = _self.initPassword()
        _self.passwordInstance2 = _self.initPassword2()
      })
    },
    initKeyBord(param){
      let {click_objId, Input_texId, parent_objId, placeholderId} = param
      return new showKeyBord({
        'png': '//mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/state-secret/img', // 图片路径，用这个就行了，也可以下载到本地
        'click_objId': click_objId, // 触发显示键盘的Dom节点Id
        'regExp1': '[\\S\\s]', // 输入过程限制的正则，不匹配正则的字符不让输入
        'regExp2': '^[\\S\\s]{6,12}$', // 输入完成后的正则，与getValid()对应，判断输入值是否匹配该正则
        'Input_texId': Input_texId, // 接收内容的Dom节点Id
        'parent_objId': parent_objId, // 将键盘插入到何处的Dom节点Id
        'placeholderId': placeholderId, // span标签的id，该span用于模拟Input_texId的placeholder
        'len': '12', // 表示最大允许输入多少个字符[可以不传递]
        'keyBordLeft': '',
        'keyBordTop': '',
        'chaosMode': 0, // 混乱模式,0:无混乱;1:打开时乱一次;2:每输入一个字符乱一次,默认值0
        'clickStatus': 0, // 按键状态,0:鼠标划过、悬浮时按键无变化;1:鼠标划过、悬浮时按键的颜色变化,默认值0
        'titlefont': '安全支付输入',
        'backfont': '退 格',
        'capsfont': '切换大/小写',
        'surefont': '确定',
        'isen': false,
        'callBack': () => {}, // 密码校验成功回调
        'errorCallBack': () => {}, // 密码校验失败回调
        'rsaPublicKey': this.options.rsa_public_content, // RSA加密必须参数，国密加密可不要
        'sm2KeyHex': this.options.sm2_key_hex, // 国密加密必须参数，RSA加密可不要
        'license': this.options.license, // 必须参数
      })
    },
    initPassword() {
      let _self = this
      let params = {
        click_objId: '#keyboardBtn2', 
        Input_texId: '#LOGPASS2',
        parent_objId: '#ipt_pwd2',
        placeholderId: '#LOGPASS2_SHOW'
      }
      const passowrd = _self.initKeyBord(params)
      passowrd.initOptions()
      return passowrd
    },
    initPassword2() {
      let _self = this
      let params = {
        click_objId: '#keyboardBtn3', 
        Input_texId: '#LOGPASS3',
        parent_objId: '#ipt_pwd3',
        placeholderId: '#LOGPASS3_SHOW'
      }
      const passowrd = _self.initKeyBord(params)
      passowrd.initOptions()
      return passowrd
    },
    getPwd(){
      let _self = this
      // 获取国密密文
      _self.passwordInstance.setRandKey(_self.options.random_value) // 先设置随机key
      const password = _self.passwordInstance.getOutputSM() // 国密加密密码
      const rsaPassword = _self.passwordInstance.getOutput() // RSA加密密码
      // hash用于比对密码是否一致，同一个密码加密密文可能不同，hash一定相同
      const hash = _self.passwordInstance.getHash() // RSA加密密码
      console.log("国密密码是", password)
      console.log("支付密码HASH是", hash)
      const hash2 = _self.passwordInstance2.getHash() // RSA加密密码
      console.log("确认密码HASH是", hash2)
      // // 清空密码框
      // passwordInstance.clearPWD()

      // 其他API请参考文档
    },
  }
};
</script>
<style scoped lang="scss">
.LPay-code-container{
  .ipt-pwd-content{
    height: 80px;
    position: relative;
  }
}
</style>